继承公共视图文件 -->
<extend name="./Application/Admin/View/layout.html" />
 <!-- 可变内容区域 -->
 <block name="mid">
	<!-- start: Content -->


	<div class="layui-row">
	    <div class="layui-col-md12">
	    	<div class="panel-heading">
                <h2><i class="fa fa-indent red"></i><strong>&nbsp;&nbsp;添加角色</strong></h2>
            </div>
	    </div>
	    <hr class="layui-bg-black">
	    <div class="layui-col-md6 layui-col-md-offset3" style="margin-top: 30px;">

		  <form class="layui-form" action="" method="post">
			<div class="layui-form-item">
			    <label class="layui-form-label" style="width:100px;">角色名称</label>
			    <div class="layui-input-block">
			      <input type="text" name="title" required  lay-verify="required" placeholder="例：市场经理" autocomplete="off" class="layui-input">
			    </div>
			</div>

			<div class="layui-form-item">
			    <label class="layui-form-label" style="width:100px;">状态</label>
			    <div class="layui-input-block">
			      <input type="radio" name="status" style="background-color: #009688;" value="1" title="启用" checked>
			      <input type="radio" name="status" value="0" title="禁用">
			    </div>
			</div>

		    <div class="layui-form-item">
			    <label class="layui-form-label" style="width:100px;">权限列表</label>
                <input type="checkbox" title="全选" lay-skin="primary" lay-filter="all">
				<foreach name="top_nav" item="v">
			    <div class="layui-input-block child">
			        <input type="checkbox" class="prt" lay-filter="parent" value="{$v.id}" name="rules[]" title="{$v.name}" lay-skin="primary"  >

					<div class="layui-input-block children" style="margin-left:0">
					 	<foreach name="rule" item="vo">
					 		<eq name="v['id']" value="$vo['pid']">
							<input type="checkbox" class="cdn" lay-filter="children" value="{$vo.id}" name="rules[]" title="{$vo.title}" lay-skin="primary"  >
							</eq>
						</foreach>
				    </div>
			    </div>
				</foreach>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
				  <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
				  <button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
			</form>
		  </div>
	    </div>


	<!-- end: Content -->

</block>

<block name="js">

	<script type="text/javascript">
		$(function(){

            form.on('checkbox(all)', function(data){


				//全选反选
				if(data.elem.checked){
					$('.child .layui-form-checkbox').addClass('layui-form-checked');
				}else{
					$('.child .layui-form-checkbox').removeClass('layui-form-checked');
				}

			});

			form.on('checkbox(parent)', function(data){

				// alert($('.prt').val());
                //顶级全选反选
				if(data.elem.checked){
					data.othis.next().find('.layui-form-checkbox').addClass('layui-form-checked');

				}else{
					data.othis.next().find('.layui-form-checkbox').removeClass('layui-form-checked');

				}
			});

			form.on('checkbox(children)', function(data){

				// console.log(data.elem); //得到checkbox原始DOM对象
				// console.log(data.elem.checked); //是否被选中，true或者false
				// console.log(data.value); //复选框value值，也可以通过data.elem.value得到
				// console.log(data.othis); //得到美化后的DOM对象

                //点击子级时，父级也要选中
				if(data.elem.checked){
					data.othis.parent().parent().find('.layui-form-checkbox:first').addClass('layui-form-checked');
					// console.log(data.othis.parent().parent().next());

				}else{
					if(data.othis.parent().find(':checkbox:checked').length<1){
						data.othis.parent().parent().find('.layui-form-checkbox:first').removeClass('layui-form-checked');
					}


				}
			});
		})
	</script>
</block>